// Progress
tdr-progress(ng-if="vm.showProgress", info="vm.progressInfo")

// Tree
.virtualRepeatInfiniteScroll(ng-show="vm.showTree")
	md-virtual-repeat-container.vertical-container(md-top-index="vm.topIndex", ng-show="vm.showNodes")

		.treeNodes.repeated-item(id="{{item._id}}" md-virtual-repeat="item in vm.nodesToShow")
			.treeNode(
			style="margin-left:{{item.level * 20}}px"
			ng-if="item.name"
			layout="row"
			layout-align="start center"
			flex
			ng-class="{treeNodeSelected: item.selected}")
				// Expand/collapse
				md-button.md-icon-button.md-primary.expandButton(aria-label="Toggle Expand", ng-click="vm.expand($event, item._id)", ng-if="!item.status")
					md-icon.angular-material-icons(ng-if="!item.expanded && item.hasChildren") add_box
					md-icon.angular-material-icons(ng-if="!item.expanded && !item.hasChildren") remove
					md-icon.angular-material-icons(ng-if="item.expanded") indeterminate_check_box

				md-button.md-icon-button.noAccessButton(aria-label="Status", ng-if="item.status")
					md-icon.angular-material-icons(ng-if="item.status==='NO_ACCESS'") do_not_disturb
					md-icon.angular-material-icons(ng-if="item.status==='NOT_FOUND'") error_outline
				// Name
				div(flex, layout="row", layout-align="start center"
								ng-click="vm.selectNode(item)")
					p(ng-if="!item.status") {{item.name}}
					p.noAccessName(ng-if="item.status") {{item.name}}
				// Toggle visibility
				md-button.md-icon-button.md-primary.toggleButton(aria-label="Toggle Visible", ng-click="vm.toggleTreeNode(item)", ng-if="!item.status")
					md-icon.angular-material-icons(ng-if="item.toggleState==='visible'") visibility
					md-icon.angular-material-icons(ng-if="item.toggleState==='invisible'") visibility_off
					md-icon.angular-material-icons.parentOfInvisible(aria-label="ParentOfInvisible", ng-if="item.toggleState==='parentOfInvisible'") visibility_off
			md-divider(ng-if="item.name")

// Filter list
div(class="virtualRepeatInfiniteScroll" ng-if="vm.showFilterList && vm.filterItemsFound")
	md-virtual-repeat-container.vertical-container
		//.treeNodes.filterNode.repeated-item(md-virtual-repeat="item in vm.infiniteItemsFilter", md-on-demand="", flex="", layout="row", layout-align="start center")
		.treeNodes.filterNode.repeated-item(md-virtual-repeat="item in vm.nodes")
			// Name
			div(layout="row", layout-align="start center", flex)
				div(flex, layout="row", layout-align="start center")
					p.filterListNodeName(ng-click="vm.filterItemSelected(item)", ng-class="item.class") {{item.name}}
				// Toggle visibility
				//md-button.md-icon-button.md-primary.toggleButton(aria-label="Toggle Visible", ng-click="vm.toggleFilterNode(item)")
					md-icon.angular-material-icons(aria-label="Visible", ng-if="item.toggleState==='visible'") visibility
					md-icon.angular-material-icons(aria-label="Invisible", ng-if="item.toggleState==='invisible'") visibility_off
			md-divider(ng-if="item")

.cardInfo(ng-if="vm.showFilterList && !vm.filterItemsFound")
	p No items found
